import "./attention.scss"
import { connect } from "react-redux";
import { getUser, getUserPgc, getUserAuthor, getUserTheme, getUserVideos } from '../../action/action';
import { getCookie, setCookie } from './../../js/cookie';
import { Link } from 'react-router-dom';
import { PullToRefresh } from 'antd-mobile';
@connect(
    (state) => {
        return {
            userData: state.my.userData,
            userAuthorData: state.my.userAuthorData,
            userPgcData: state.my.userPgcData,
            userThemeData: state.my.userThemeData,
            userVideosData: state.my.userVideosData,
        }
    }
)
export class Attention extends React.Component {
    state = {
        refreshing: false,
        down: true,
        height: document.documentElement.clientHeight,
        data: [],
    }
    componentWillMount() {
        let { dispatch } = this.props;
        dispatch(getUser(getCookie("ky_uid"), (data) => {
            dispatch(getUserPgc(data.result.uatt_pgc, (data) => {
            }));
            dispatch(getUserAuthor(data.result.uatt_pgc, (data) => {
            }));
            dispatch(getUserTheme(data.result.uatt_theme, (data) => {
            }));
            dispatch(getUserVideos(data.result.uatt_theme, (data) => {
            }));
        }));

    }
    render() {
        let { userData, userAuthorData, userPgcData, userThemeData, userVideosData } = this.props;
        let headerAtt = null;
        let bankBoxAtt = null;
        let themeList = null;
        let pgcBox = null;
        let themeBox = null;
        if (getCookie("ky_uid")) {
            if (userData && userAuthorData && userPgcData) {
                if (userData.result.uatt_pgc.length !== 0) {
                    headerAtt = userAuthorData.map((item, index) => {
                        return (
                            <li key={index}>
                                <div className="info">
                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.vid); }}>
                                        <div className="via">
                                            <img src={item.pgcInfo.icon} />
                                        </div>
                                    </a>
                                </div>
                            </li>)
                    })
                    bankBoxAtt = userPgcData.map((item, index) => {
                        return (<li key={index}>
                            <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/author/" + item.vid); }}>
                                <div className="info">
                                    <div className="via">
                                        <img src={item.itemList[0].data.itemList[0].data.author.icon} />
                                    </div>
                                    <div className="msg">
                                        <h4>{item.itemList[0].data.itemList[0].data.author.name}</h4>
                                        <p><span>发布：</span>{item.itemList[0].data.itemList[0].data.title}</p>
                                    </div>
                                </div>
                            </a>
                            <p>{item.itemList[0].data.itemList[0].data.description}</p>
                            <div className="bank-tip">
                                <a>{item.itemList[0].data.itemList[0].data.category}</a>
                            </div>
                            <div className="imgBox">
                                <Link to={"/video/" + item.itemList[0].data.itemList[0].data.id}><img src={item.itemList[0].data.itemList[0].data.cover.detail} /></Link>
                                <span>{item.itemList[0].data.itemList[0].data.duration / 60 < 10 ? "0" + parseInt(item.itemList[0].data.itemList[0].data.duration / 60) : parseInt(item.itemList[0].data.itemList[0].data.duration / 60)}:{item.itemList[0].data.itemList[0].data.duration % 60 < 10 ? "0" + item.itemList[0].data.itemList[0].data.duration % 60 : item.itemList[0].data.itemList[0].data.duration % 60}</span>
                            </div>
                            <div className="inter">
                            </div>
                        </li>)
                    })
                }
            }
            if (userData && userThemeData && userVideosData) {
                if (userData.result.uatt_theme.length !== 0) {
                    themeList = userVideosData.map((item, index) => {
                        if (item.itemList[0]) {
                            return (<li key={index}>
                                <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/detail/dtrec/" + item.vid); }}>
                                    <div className="info">
                                        <div className="via">
                                            <img src={item.itemList[0].data.content.data.author.icon} />
                                        </div>
                                        <div className="msg">
                                            <h4>{item.itemList[0].data.content.data.author.name}</h4>
                                            <p><span>发布：</span>{item.itemList[0].data.content.data.title}</p>
                                        </div>
                                    </div>
                                </a>
                                <p>{item.itemList[0].data.content.data.description}</p>
                                <div className="bank-tip">
                                    {
                                        item.itemList[0].data.content.data.tags.map((item, index) => {
                                            return (<a key={index}>{item.name}</a>)
                                        })
                                    }
                                </div>
                                <div className="imgBox">
                                    <Link to={"/video/" + item.itemList[0].data.content.data.id}><img src={item.itemList[0].data.content.data.cover.detail} /></Link>
                                    <span>{item.itemList[0].data.content.data.duration / 60 < 10 ? "0" + parseInt(item.itemList[0].data.content.data.duration / 60) : parseInt(item.itemList[0].data.content.data.duration / 60)}:{item.itemList[0].data.content.data.duration % 60 < 10 ? "0" + item.itemList[0].data.content.data.duration % 60 : item.itemList[0].data.content.data.duration % 60}</span>
                                </div>
                                <div className="inter">
                                </div>
                            </li>)
                        }
                    })
                }
            }
            if (userData && userData.result.uatt_theme.length !== 0) {
                themeBox = (
                    <div className="theme-box">
                        <div className="title">
                            <h3>关注主题</h3>
                            <ul>
                                {themeList}
                            </ul>
                        </div>
                    </div>
                )
            }
            if (userData && userData.result.uatt_pgc.length !== 0) {
                pgcBox = (
                    <div className="pgc-box">
                        <div className="tip cl">
                            <ul>
                                {headerAtt}
                            </ul>
                            {/* <div>
                                <p>全部关注</p>
                                <span>&gt;</span>
                            </div> */}
                        </div>
                        <div className="bank-box">
                            <ul>
                                {bankBoxAtt}
                            </ul>
                        </div>
                    </div>
                )
            }
            if (pgcBox || themeBox) {
                return (
                    <PullToRefresh
                        damping={60}
                        ref={el => this.ptr = el}
                        style={{
                            height: this.state.height,
                            overflow: 'auto',
                        }}
                        indicator={this.state.down ? {} : { deactivate: '下拉可以刷新' }}
                        direction={this.state.down ? 'down' : 'up'}
                        refreshing={this.state.refreshing}
                        onRefresh={() => {
                            this.setState({ refreshing: true });
                            setTimeout(() => {
                                location.reload()
                                this.setState({ refreshing: false });
                            }, 1000);
                        }}
                    >
                        <div className="attention">
                            {pgcBox}
                            {themeBox}
                        </div>
                    </PullToRefresh>
                )
            } else {
                return (
                    <div className="no-content">还没有关注</div>
                )
            }
        } else {
            return (
                <div className="no-content">
                    请先登录
                </div>
            )
        }
    }
}